<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition"  ref="formData"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;" v-model="formData.schoolid" @change="schoolchange"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;" v-model="formData.eid"
                               placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>

                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;" v-model="formData.usertype"
                               placeholder="请选择类别">
                        <el-option
                            v-for="item in onusertypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        style="width: 220px;"
                        placeholder="搜索姓名"
                        prefix-icon="el-icon-search"
                        v-model="formData.name">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="search" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>


        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="name"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="sexdesc"
                    label="性别"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="tel"
                    label="联系方式"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="ename"
                    label="原老师"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="原校区"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="periodname"
                    label="原时段"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="beginTime"
                    label="开始时间"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="endTime"
                    :formatter="dateFormat"
                    label="结束时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="remainclass"
                    label="剩余课时"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="changeSchool(scope.$index,scope.row)" type="text" size="small">转班
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formData.pageno"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="转班操作" :visible.sync="changeDialog">
            <el-form :model="formData" label-position="labelPosition"  ref="formData" labelWidth="80px"
                     class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择校区">
                            <el-select size="mini" v-model="addData.toschoolid" @change="tochoolchange" placeholder="选择校区">
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择老师">
                            <el-select size="mini" v-model="addData.toeid" placeholder="请选择性别">
                                <el-option
                                    v-for="item in toempsList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="上课时段">
                            <el-select size="mini" v-model="addData.toperiod" placeholder="请上课时段">
                                <el-option
                                    v-for="item in periodList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input size="mini" v-model="addData.comments" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="10">
                        <el-button type="primary" @click="changeStu" size="mini">确认转班</el-button>
                    </el-col>
                </el-row>

            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import * as moment from 'moment';
    import {changeClassLog, changeClassList,subChangeClass,changeSchool} from '@/api/getData'
    import ElCol from "element-ui/packages/col/src/col";
    import changeClassOper from '../page/changeClassOper.vue'
    import checkListOfUser from '../page/changeClassOper.vue'

    export default {
        data() {
            return {
                empsList:[],
                toempsList:[],
                formData: {
                    schoolid: '',
                    eid: '',
                    perioidid:'',
                    name: '',
                    pageno: 1,
                    pagesize: 10,

                },
                addData:{
                    uid:'',
                    toeid:'',
                    toschoolid:'',
                    toperiod:'',
                    comments:'',

                },

                count: 0,
                changeDialog: false,
                checkDialog: false,
                tableData: [],
                currentRow: null,
                offset: 0,
                count: 0,
            }
        },
        mounted() {
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if(this.schoolList==null){
                this.getAllSchool();
            }
            if(this.periodList==null){
                this.getPeriod();
            }


        },
        computed: {
            ...mapGetters(['schoolList','empschoolMap','onusertypeList','periodList'])
        },
        components: {
            ElCol,
            headTop,
            changeClassOper,
            checkListOfUser,
        },
        created() {
            this.initData();
        },
        methods: {
            ...mapActions(['getAllSchool','getPeriod','fillSchoolEmps']),
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            tochoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
               // alert(JSON.stringify(list));
                this.toempsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.toempsList.push(item);
                    });
                }
            },




            dateFormat:function(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            changeClass(){

            },
            async search(){
                this.initData();
            },


            async changeStu(){
                try {
                    var data = {"data": this.addData}
                    alert(JSON.stringify(data));
                    let result = await changeSchool(data);
                    if (result.success == true) {
                       // this.initData();
                        this.$message({
                            type: 'success',
                            message: '转班成功'
                        });
                        this.formData = {};
                        this.addData={};
                    }
                } catch (err) {
                    console.log(err);
                }
            },

            changeSchool(index, row) {
                this.changeDialog = true;
                this.addData.uid=row.uid;


            },


            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.formData.pageno = val;
                initData(this.formData);
            },


            async initData() {
                const v = await subChangeClass({"data": this.formData});
                if (v.success == true) {
                    const studList = v.data.values;
                    this.tableData = [];
                    studList.forEach(item => {
                        const tableData = {};
                        tableData.uid=item.uid;
                        tableData.name = item.name;
                        tableData.sexdesc = item.sexdesc;
                        tableData.tel = item.tel;
                        tableData.schoolname = item.schoolname;
                        tableData.ename = item.ename;
                        tableData.periodname = item.periodname;
                        tableData.beginTime = item.beginTime;
                        tableData.endTime = item.endTime;
                        tableData.remainclass = item.remainclass;
                        this.tableData.push(tableData);
                    })
                }
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
